<template>
	<view class="home">
		<!-- 搜索 + 购物车 -->
		<view class="header">
			<image class="icon" src="../../static/icons/search.png"></image>
			<image class="icon" src="../../static/icons/cart.png" @tap="goCar"></image>
		</view>
		<!-- 广告 -->
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true"  :autoplay="true" :interval="2000" :duration="1000" :circular="true">
				<swiper-item class="item" v-for="item in bannerList" :key="item.id">
					<image class="img" :src="item.pic"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="kind">
			<view class="item" v-for="item in kindList" :key="item.id" @tap="goGoods(item.id)">
				<image class="img" :src="item.icon"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<!-- 限时活动 -->
		<view class="activity">
			<image class="icon" src="../../static/icons/activity.png"></image>
			<view class="text">限时活动:</view>
			<swiper class="swiper" :autoplay="true" :interval="2000" :duration="1000" :circular="true" :vertical="true" v-if="this.activityList.length != 0">
				<swiper-item class="item" v-for="item in activityList" :key="item.recommendId" @tap="goGoodsDetail(item.productId)">
					<view class="product-name">{{ item.name }}</view>
					<view class="product-price">
						<view class="text text1">
							{{ item.price }}元
						</view>
						<view class="text text2">
							现价: {{ item.price }}元
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="none" v-else>暂无</view>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="title">热门推荐</view>
			<swiper class="swiper" :autoplay="true" :interval="2000" :duration="1000" :circular="true">
				<swiper-item class="item" v-for="item in hotList" :key="item.id" @tap="goGoodsDetail(item.id)">
					<image class="img" :src="item.pic"></image>
					<view class="name">{{item.name}}</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 新品推荐 -->
		<view class="new">
			<view class="title">新品推荐</view>
			<view class="list">
				<view class="item" v-for="item in newList" :key="item.id" @tap="goGoodsDetail(item.id)">
					<image class="img" :src="item.pic"></image>
					<view class="info">
						<view class="name">{{item.name}}</view>
						<view class="price">价格 : {{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="title">猜你喜欢</view>
			<view class="list">
				<view class="item" v-for="item in likeList" :key="item.id" @tap="goGoodsDetail(item.id)">
					<image class="img" :src="item.pic"></image>
					<view class="box">
						<view class="name">{{item.name}}</view>
						<view class="info">
							<view class="price">￥{{item.price}}元</view>
							<view class="leju">乐居</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bannerAds,findCategory,recommendList,hotList,lejuLatestProducts,saleMostProducts
	} from '../../api/home/index.js'
	export default {
		data() {
			return {
				bannerList: [], // 列表 - 广告
				kindList: [], // 列表 - 分类
				activityList: [], // 列表 - 限时活动
				hotList: [], // 列表 - 热门推荐
				newList: [], // 列表 - 新品推荐
				likeList: [], // 列表 - 猜你喜欢
			};
		},
		onLoad() {
			// 广告
			bannerAds().then(res=>{
				this.bannerList = res.data.data.items
			});
			// 分类
			findCategory('1308336521604599809').then(res=>{
				this.kindList = res.data.data.category.children
			});
			// 限时活动
			recommendList().then(res=>{
				this.activityList = res.data.data.items
			});
			// 热门推荐
			hotList().then(res=>{
				this.hotList = res.data.data.items
			});
			// 新品推荐
			lejuLatestProducts().then(res=>{
				this.newList = res.data.data.productList
			});
			// 猜你喜欢
			saleMostProducts().then(res=>{
				this.likeList = res.data.data.items
			});
		},
		methods:{
			// 跳转 - 商品列表页
			goGoods(val){
				uni.navigateTo({
					url: `../kind/goods/goods?id=${val}`
				})
			},
			// 跳转 - 商品详情页
			goGoodsDetail(val){
				uni.navigateTo({
					url: `../kind/goods/detail/detail?id=${val}`
				})
			},
			// 跳转 - 购物车页面
			goCar(){
				uni.navigateTo({
					url: "../user/car/car"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
